<template>
	<view class="rich flex_c" @click="close">
		<view class="title">记录</view>
		<view class="content">
			<scroll-view scroll-y="true" @scrolltolower="onReach">
				<view class="list flex_r_between" v-for="(item,index) in list" :key="index">
					<view class="left flex_center">
						
						<view class="avatar">
							<image :src="item.to_avatar" mode="aspectFill"></image>
						</view>
						
						<view class="text">
							<view class="nickname flex_center">
								<text class="hidden">{{ item.to_nickname }}</text>
								<view>
									<uni-dateformat :date="item.create_time*1000"
										format="yyyy-MM-dd"></uni-dateformat>
								</view>
							</view>
							<view class="remark">
								您送出{{ item.prize_name }}，增加+ {{ item.pay_gold_price }}个财富，对方获得{{ Math.floor(Number(item.prize_gold_price) / 10) }}魅力值
							</view>
						</view>
						
					</view>
					<view class="right">+ {{ item.prize_gold_price }}</view>
				</view>
				
				<view class="loading" v-if="total > list.length && total != 0">
					<u-loading-icon mode="semicircle"></u-loading-icon>
				</view>
				
				<view class="loading" v-if="!list.length && total == 0">
					<view style="width: 100%;padding-top: 66rpx;" class="flex_r_around">
						<view class="empty">
							<u-empty
							 text="暂无数据"
							 mode="list" :icon="$util.prefix('public/empty.png')">
							</u-empty>
						</view>
					</view>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'list',
		data() {
			return {
				total: 1,
				page: 1,
				list: [],
			}
		},
		methods: {
			
			close() {
				this.$emit('closeModal')
			},
			
			getList() {
				this.$get('/active.supGiftPrizeV3/getMyPrizeLog', {
					page: this.page
				},true,()=>{
					this.total = 0;
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},
			
			onReach(){
				if(this.total > this.list.length){
					this.page++;
					this.getList();
				}
			},
			
		},
		
		created() {
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
	.rich {
		background: url('https://qiniu-cdn.maeiyun.com//h5static/prize/page.png') 0 -20rpx repeat;
		background-size: cover;
		background-color: #7A7489;
		padding: 36rpx 0;
		height: 100vh;
		border-radius: 68rpx 68rpx 0 0;
	}

	.title {
		font-family: 'gongfu';
		font-size: 48rpx;
		color: #FFFFFF;
		line-height: 58rpx;
		text-shadow: 0px 2px 14px #B30976;
		margin-bottom: 34rpx;
	}
	
	.content {
		flex: 1;
		width: 694rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 2rpx 0rpx 2rpx #FFFFFF;
		border-radius: 40rpx;
		padding: 24rpx 32rpx;
		overflow: hidden;
		
		scroll-view {
			height: 100%;
		}
		
		.list {
			padding: 24rpx 0;
			align-items: flex-start;
			overflow: hidden;
			.left {
				flex: 1;
				overflow: hidden;
				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
					overflow: hidden;
					margin-right: 16rpx;
					image {
						width: 80rpx;
						height: 80rpx;
					}
				}
				
				.text {
					flex: 1;
					overflow: hidden;
					.nickname {
						overflow: hidden;
						text {
							flex: 1;
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
							line-height: 40rpx;
						}
						view {
							font-size: 24rpx;
							color: #999999;
							line-height: 34rpx;
							margin-left: 8rpx;
							
							text {
								font-size: 24rpx;
								color: #999999;
								line-height: 34rpx;
							}
						}
					}
					
					.remark {
						font-size: 22rpx;
						color: #999999;
						line-height: 32rpx;
						margin-top: 4rpx;
					}
				}
			}
			
			.right {
				font-weight: 500;
				font-size: 28rpx;
				color: #131313;
				line-height: 40rpx;
				margin-left: 50rpx;
			}
		}
	
		.loading {
			padding: 16rpx 0;
		}
	}
	
</style>